<template>
  <div class="salesAnalysis">
    <!-- 销售统计 -->
    <div id="salesAnalysis" class="salesAnalysis-main"></div>
  </div>

</template>

<script>
const echarts = require('echarts')
import {
  salesStatistics,
  flUseWaterYearWideTable,
} from '@/api/baseManage/flMaintain/index'
export default {
  name: 'ecahrtsM',
  data() {
    return {
      echarts: '',
      waterData: [],
    }
  },
  methods: {
    //改变div的长和宽
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let salesAnalysis = document.getElementById('salesAnalysis')
      salesAnalysis.style.height = height - 5 + 'px'
      salesAnalysis.style.width = width + 50 + 'px'
      salesAnalysis.style.marginLeft = -30 + 'px'
      this.echarts = this.$echarts.init(salesAnalysis)
      this.echarts.resize()
      // this.createEcharts()
      //this.AlwaysCopyData()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById('salesAnalysis'))

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          // 触发类型触发类型：axis柱状图，折线图
          trigger: 'axis',
          // 指示器类型
          axisPointer: {
            // 指示器类型 cross 十字准星指示器  line直线指示器
            type: 'line',
            // 直线颜色
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          // 各工具配置项。
          feature: {},
        },
        legend: {
          data: ['销量'],
        },
        xAxis: [
          {
            // 坐标轴类型
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
            axisPointer: {
              // 阴影指示器
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            //  数值轴，适用于连续数据。
            type: 'value',
            name: '销量',
            min: 0,
            max: 'dataMax',
            // 强制设置坐标轴分割间隔
            interval: 300,
            axisLabel: {
              formatter: '{value}',
            },
          },
          // {
          //     type: 'value',
          //     name: '',
          //     min: 0,
          //     max: 'dataMax',
          //     interval: 300,
          //     axisLabel: {
          //         formatter: ''
          //     }
          // }
        ],
        series: [
          {
            name: '销量',
            // 格式  'line'（切换为折线图） 'bar'（切换为柱状图）
            type: 'bar',
            showBackground: true,
            data: this.waterData,
          },
          // {
          //     name: '水度',
          //     type: 'line',
          //     yAxisIndex: 1,
          //     data: this.waterData
          // }
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    // 获取柱状图水量
    async getWaterData(call) {
      const res = await salesStatistics()
      console.log(res, '组装获取')
      console.log(res.data, '组装获取')
      const resData = res.data
      let resArray = [
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
      ]
      for (let i = 0; i < resData.length; i++) {
        const element = resData[i]
        let momentData = element.MONTHDate - 1
        console.log(momentData)

        resArray[momentData] = element.amount
      }
      console.log(resArray, '参数')

      this.waterData = res.data
      // console.log(res.data);
      console.log(this.waterData, 'zongshuiliang ')
      // console.log(this.data,'zongshuiliang ');
      const waterDa = res.data
      console.log(waterDa, 'ceceesssss')

      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '销量',
            min: 0,
            max: 'dataMax',
            interval: 300,
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        series: [
          {
            name: '销量',
            type: 'bar',
            showBackground: true,
            data: resArray,
          },
        ],
      })
      call && call()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  mounted() {
    this.createEcharts()
    this.getWaterData(() => {
      let width =
        document.querySelector('.salesAnalysis').parentNode.parentNode
          .parentNode.style.width
      let height =
        document.querySelector('.salesAnalysis').parentNode.parentNode
          .parentNode.clientHeight
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
  created() {},
}
</script>

<style>
.salesAnalysis-main {
  width: 320px;
  height: 220px;
}
</style>
